<template>
<div class="transport-content-box wei_railway-box">
      <!-- banner图 -->
      <div class="h-banner">
           <img :src="imgs">
      </div>
        <!-- 热门路线 -->
      <div class="h-hot-way container-1200">
            <div class="h-hot-title">
                  <span></span>
                  <span>热门线路</span>
                  <img src="./../.././static/img/index/hot.png">
            </div>
            <div class="h-hot-city">
              <ul>
             <!--    <li v-for="(item,index) in hotLineList" :key="index" @click="changeCity(item)">
                    <nuxt-link :to="'/transport/list?fromCity='+item.fromCity+'&toCity='+item.toCity">
                      <span>{{item.fromCity}}</span>
                      <span></span>
                      <span>{{item.toCity}}</span>
                    </nuxt-link>
                </li> -->
                <li><a href="#" @click="goTop(1)"><span>中国 昆明-新加坡</span></a></li>
                <li><a href="#" @click="goTop(0)"><span>中国 昆明-泰国曼谷</span></a></li>
                <li><a href="javascript:;"><span>中国 昆明-美国 波士顿</span></a></li>
                <li><a href="javascript:;"><span>中国 玉溪-菲律宾 马尼拉</span></a></li>
                <li><a href="javascript:;"><span>中国 玉溪-泰国 曼谷</span></a></li>

                <li><a href="javascript:;"><span>中国 玉溪-美国 洛杉矶</span></a></li>
                <li><a href="javascript:;"><span>中国 玉溪-美国 洛杉矶</span></a></li>
                <li><a href="javascript:;"><span>中国 昆明-缅甸 仰光</span></a></li>
                <li><a href="javascript:;"><span>中国 临沧-老挝 万象</span></a></li>
                <li><a href="javascript:;"><span>中国 玉溪-美国 圣安东尼奥</span></a></li>
              </ul>
            </div>
      </div>
      <!-- 出发城市搜索 -->
      <div class="h-city-search">
         <div class="container-1200">
              <a-form>
                  <a-row :gutter='24' class='city-form'>
                            <a-col :span='6'>
                                <a-form-item label="出发地:"  :label-col="{ span: 6}" :wrapper-col="{ span:18 }">
                                      <a-input  placeholder="请选择出发地"  :value="departureCar" readOnly @click="magSvgShowMap('departureCar')"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span='6'>
                                <a-form-item label="到达地:"  :label-col="{ span: 8}" :wrapper-col="{ span:18}">
                                      <a-input  placeholder="请选择车辆到达地" :value="destinationCar" readOnly @click="magSvgShowMap('destinationCar')"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span='6'>
                                      <a-button type="primary" :span='2' style='margin:0 20px 0 20px;'  @click="lineGetSelectLines">搜索</a-button>
                                      <a-button :span='2' @click="reset">重置</a-button>
                            </a-col>
                  </a-row>
             </a-form>
         </div>
      </div>
      <!-- 招标信息 -->
      <div class="h-information road-detail-content container-1200">
            <div class="h-info-title">
                  <span></span>
                  <span>跨境物流服务</span>
            </div>
    <a-tabs >
      <a-tab-pane tab="进口" key="1" >
        <div class="all-ways">
          <a-list itemLayout="vertical" size="large" :dataSource="listData" :pagination="pagination">
              <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                <div class="road-box-conent">
                      <div class="road-pic">
                          <img :src="item.companyPic||'http://124.207.149.202/wly/static/img/chain/gy1-1.jpg'">
                          <!-- <img src="~static/img/special/ds7.jpg" alt=""> -->
                      </div>
                      <div class="road-name">
                          <span>出发地:<i class="road-city-name">{{item.beginPlace}}</i></span>
                          <span>到达地:<i  class="road-city-name">{{item.endPlace}}</i></span>
                          <span>货运方式:<i  class="road-city-name">水运</i></span>
                          <span>线路简介:<i class="road-black">{{item.lineRemark||'暂无'}}</i></span>
                      </div>
                </div>
                <div  class="road-box-conent public-road">
                        <span>品名:<i class="road-orange">{{item.weightPrice}}</i></span>
                        <span>数量:<i class="road-orange">{{item.volumePrice}}</i></span>
                        <span>时效:<i class="road-black">{{item.validDay}}天</i></span>
                </div>
                <div class="road-box-conent">
                        <p><i class="road-city-name">北京荣之联科技股份有限公司</i><b>推荐</b></p>
                        <div class="useStar">
                            <span>用户星级</span> 
                            <a-rate :defaultValue="item.starLevel" disabled allowHalf />
                            <div class="attestaion">已认证</div>
                        </div>
                </div>
                <div class="road-box-conent">
                    <a-button v-if="loggedIn" class='ant-btn-primary road-sell' type="primary" @click="elasticShowModal(item.userId)">我有货源</a-button>
                    <router-link v-if="!loggedIn" to="/login"><a-button  class='ant-btn-primary road-sell' type="primary">我有货源</a-button></router-link>
                    <nuxt-link :to="'/special/cross/'">
                        <a-button class='road-detail'>查看详情</a-button>
                    </nuxt-link>
                </div>
              </a-list-item>
          </a-list>
        </div>
      </a-tab-pane>
      <a-tab-pane tab="出口" key="2" >
                <div class="all-ways">
          <a-list itemLayout="vertical" size="large" :dataSource="listData" :pagination="pagination">
              <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                <div class="road-box-conent" >
                      <div class="road-pic">
                          <img :src="item.companyPic||'http://124.207.149.202/wly/static/img/chain/gy1-1.jpg'">
                      </div>
                      <div class="road-name">
                          <span>出发地:<i class="road-city-name">{{item.beginPlace}}</i></span>
                          <span>到达地:<i  class="road-city-name">{{item.endPlace}}</i></span>
                          <span>货运方式:<i  class="road-city-name">高铁</i></span>
                          <span>线路简介:<i class="road-black black">{{item.lineRemark||'暂无'}}</i></span>
                      </div>
                </div>
                <div  class="road-box-conent public-road">
                        <span>品名:<i class="road-orange">{{item.weightPrice}}</i></span>
                        <span>数量:<i class="road-orange">{{item.volumePrice}}</i></span>
                        <span>时效:<i class="road-black">{{item.validDay}}天</i></span>
                </div>
                <div class="road-box-conent">
                        <p><i class="road-city-name">北京荣之联科技股份有限公司</i><b>推荐</b></p>
                        <div class="useStar">
                            <span>用户星级</span> 
                            <a-rate :defaultValue="item.starLevel" disabled allowHalf />
                            <div class="attestaion">已认证</div>
                        </div>
                </div>
                <div class="road-box-conent">
                    <a-button v-if="loggedIn" class='ant-btn-primary road-sell' type="primary" @click="elasticShowModal(item.userId)">我有货源</a-button>
                    <router-link v-if="!loggedIn" to="/login"><a-button  class='ant-btn-primary road-sell' type="primary">我有货源</a-button></router-link>
                    <nuxt-link :to="'/special/cross/'">
                        <a-button class='road-detail'>查看详情</a-button>
                    </nuxt-link>
                </div>
              </a-list-item>
          </a-list>
        </div>
      </a-tab-pane>
    </a-tabs>
 <!--             <a-table rowKey="lineId" :columns="columns" :dataSource="listData" :pagination="pagination" class='infomation-list'>
                  <span slot="watchs" slot-scope="item, record">
                        <nuxt-link :to="`/transport/${record.lineId}`">查看详情</nuxt-link>
                  </span>
            </a-table> -->
      </div>
      <Elastic :userId="userId" ref='elastic'></Elastic>
     <!--地图Svg显示位置-->
    <map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
</div>
</template>

<script>
import Elastic from '@/components/dialog/Elastic'
import kj1 from '@/static/img/special/kj1.jpg'
import kj2 from '@/static/img/special/kj2.jpg'
import AuthMixin from '~/mixins/auth'
export default {
  mixins: [ AuthMixin ],
  components: {
    Elastic
  },
  data() {
    return {
       userId: '',
       imgs:kj1,
      // 热门
      hotLineList: [], 
         // 起运地地址
      departureCar: '',
      destinationCar: '',
      // 数据列表
      listData: [],
      columns:[{
        title:"出发地",
        dataIndex:"fromCity"
        },
        {
          title:"到达地",
          dataIndex:"toCity"
        },
        {
          title:"运输类型",
          dataIndex:"transTypeName"
        },
        {
          title:"运价",
          dataIndex:"weightPrice",
          sorter: (a, b) => a.weightPrice - b.weightPrice,
        },
        {
          title:"发布者",
          dataIndex:"companyName"
        },
        {
          title:"发布时间",
          dataIndex:"createTime",
          sorter: (a, b) => a.createTime - b.createTime,
        },
        {
          title:"有效期",
          dataIndex:"validDay"
        },
        {
          title:"查看",
          dataIndex:"watchs",
          scopedSlots: { customRender: 'watchs' },
        }
      ],
      transType: '',
      highwayList: [],
      // 表格分页
      pagination: {
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        current: 1,
        pageSize: 10,
        // showSizeChanger: true,
        total: 0,
        showTotal: (total, range) => `共 ${total} 条记录`
      },
    }
  },
   beforeCreate() {
    // this.formCar = this.$form.createForm(this);
  },
  created: function() {
    const _transType = this.$route.query.transType;
    if ( _transType ) this.transType = parseInt(_transType);
    this.infoCommonDict(12);
    this.lineGetLinesHot();
    this.lineGetSelectLines();
  },
  methods: {
      // 弹框
      elasticShowModal(id){
        this.userId = id
        this.$refs.elastic.showModal(id);
      },
      // 字典表接口 
      async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type,
            pageSize: 99,
            pageNum: 1
          })
          if (res.status) {
            switch(type){
              case 12: this.highwayList = res.data.rows; break;
            }
          } 
      },
      //换图片
      goTop(data){
        if(data){
          this.imgs = kj1;
        }else{
          this.imgs = kj2;
        }

      },
      // 重置
      reset (){
        // this.airTransfer = '';
        // this.companyName = '';
        this.departureCar = '';
        this.destinationCar = '';
        this.lineGetSelectLines();
      },
      // 获取热门线路
      async lineGetLinesHot () {
        const res = await this.$store.dispatch('info/lineGetLinesHot',{
          pageSize: 10,
          pageNum: 1,
          hotLine: 1
        })
        if (res.status) {
          this.hotLineList = res.data;
        } 
      },
      // 获取线路列表
      async lineGetSelectLines () {
          const res = await this.$store.dispatch('info/lineGetSelectLines',{
            lineType: 2,
            fromCity: this.departureCar,
            companyName: this.companyName,
            toCity: this.destinationCar,
            transType: this.transType,
            pageSize: 7,
            pageIndex: 1,
          })
          if (res.status && res.data) {
            this.listData = res.data.rows;
            this.pagination.total = res.data.total;
          } else{
            this.listData = [];
            this.pagination.total = 0;
          }
      },
      //热门城市
      changeCity(item){
        this.departureCar =item.fromCity;
        this.destinationCar =item.toCity;
      },
      // 运输类型切换
      transTypeChange(key){
        this.transType = key;
      },
      // 省市地图回调
      mapSvgCall (d) {
        this[d.name] = d.city;
      },
      // 起运地
      magSvgShowMap (name) {
        this.$refs.mapSvgDialog.mapSvgVisible( name,2,'','','' );
      },
      // 调用距离返回
      distanceCall (num) {
      }
  }
}
</script>
<style lang="scss">
@import "./../../assets/css/info/roadDetail.scss";
@import "../../assets/css/transport/road.scss";
.wei_railway-box{
   .ant-table-column-sorter{
        margin-top:-4px !important;
        right:30px !important;
      }
     th:nth-child(5){
       .anticon-caret-down{
            display:none !important;
        }
     }
     th:nth-child(7){
       .anticon-caret-down{
            display:none !important;
        }
     }
     .road-detail-content{
        .road-box-conent{
          .road-name{
            margin-top:20px;
          }
        }
      .road-box-conent:nth-child(1){
        // width:500px !important;
        span{
          text-indent: 1rem;
        }
      }
     }

   //出发城市搜索 
   .h-city-search{
     width:100%;
     clear:both;
     height:90px;
     background:#F9F9F9;
     margin-top:30px;
      .ant-form-item-label{
          width:60px;
       }
      .ant-form-item-control{
        input{
          font-size:14px;
          height:40px;
        }
       }
     .city-form{
      padding-top:20px;
      .ant-form-item-control{
        // width:330px;
        height:40px;
        input{
          // width:330px;
        }
      }
     }
     .types-chose{
      .ant-form-item-control{
        width:190px;
        height:40px;
        input{
          width:190px;
        }
        .ant-select-selection{
          width:160px;
            height:40px;
            .ant-select-selection__rendered{
              line-height:40px;
            }
        }
      }
     }
   }
    tr,td,th{
      padding:8px !important;
   }
     //公共样式
  .all-ways {
     .road-box-conent:nth-child(2){
          margin-top:40px;
         .road-orange{
               color:#FFA200;
         }
         p{
          line-height:16px;
          margin-bottom:12px;
          text-align: center;
         }
         span{
           margin-bottom:12px;
           text-align: left;
         }
        .seaTime{
            margin-top:16px;
        }
      }
    .road-box-conent:nth-child(3){
          margin-left:30px;
         .road-city-name{
          vertical-align:middle;
        }
    }
  }
  //公路,铁路
  .public-road{
      width:165px;
      text-align:center;
      margin-left: 15px;
      .road-railway{
        margin: 0 auto;
        padding-left: 72px;
      }
  }
}
.black{
  padding-left: 0px !important;
}
</style>